<template>
	<view class="page-box">
		<uni-section title="户型信息" type="line"></uni-section>
		<uni-section title="户型1" type="circle"></uni-section>
		<view class="form-box">			
			<view>
				<view>{{ formList[0].lable }}</view>
				<view class="more-input">
					<input type="text" v-model="layout.room" /><text>室</text>
					<input type="text" v-model="layout.liveRoom" /><text>厅</text>
					<input type="text" v-model="layout.toilet" /><text>卫</text>
				</view>
			</view>
			<view>
				<view>{{ formList[1].lable }}</view>
				<input v-model="house_layout[formList[1].name]" type="text" :placeholder="`请填写` + formList[1].lable" placeholder-style="color:#bdbdbd" />
				<text>{{formList[1].unit}}</text>
			</view>
			<view>
				<view>{{ formList[2].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[2])" :range="formList[2].array" range-key="val">
						<view :class="formList[2].index === '' ? 'c-gray' : ''">{{ formList[2].index === "" ? '请选择'+formList[2].lable : formList[2].array[formList[2].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[3].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[3])" :range="formList[3].array" range-key="val">
						<view :class="formList[3].index === '' ? 'c-gray' : ''">{{ formList[3].index === "" ? '请选择'+formList[3].lable : formList[3].array[formList[3].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[4].lable }}</view>
				<input v-model="house_layout[formList[4].name]" type="text" :placeholder="`请填写` + formList[4].lable" placeholder-style="color:#bdbdbd" />
				<text>{{formList[4].unit}}</text>
			</view>						
		</view>
		<view class="two-btn">
			<view class="btn-box" @click="fnAdd">添加户型</view>
			<view class="btn-box" @click="fnSubmit">下一步</view>
		</view>
		<view v-for="(item,index) in resultList" :key="index">
			<uni-section :title=item.title type="circle"></uni-section>
			<view class="form-box">			
				<view>
					<view>房屋户型</view>
					<view class="more-input">
						<input :value=item.room disabled="true"/><text>室</text>
						<input :value=item.liveRoom disabled="true"/><text>厅</text>
						<input :value=item.toilet disabled="true"/><text>卫</text>
					</view>
				</view>
				<view>
					<view>房屋面积</view>
					<input :value=item.house_area disabled="true"/>				
				</view>
				<view>
					<view>户型结构</view>
					<input :value=item.house_layout_structure disabled="true" />					
				</view>
				<view>					
					<view>房屋朝向</view>
					<input :value=item.orientation_of_house disabled="true" />					
				</view>
				<view>
					<view>参考价格</view>
					<input :value=item.house_price disabled="true" />
					<text>万元/套</text>
				</view>						
			</view>
			<view class="two-btn">
				<view class="btn-box" @click="fnAdd">添加户型</view>
				<view class="btn-box" @click="fnSubmit">下一步</view>
			</view>			
		</view>
	</view>
</template>

<script>
import uniSection from '@/components/uni-section/uni-section.vue'
import store from '@/store/store.vue'
export default {
	components: {
		uniSection
	},
	onLoad(option) {
		this.house = JSON.parse(decodeURIComponent(option.param))		
		this.house.house_layout_id = []
	},
	data() {
		return {
			isAdded: false,
			house_layout:{
				'house_layout':'',
				'house_area':'',
				'house_layout_structure':'',
				'orientation_of_house':'',
				'img_url':'',
				'house_price':''
			},
			resultId: 1,
			resultList:[
				
			],
			resultObj:{
				
			},
			pageType: '',//1新房 2二手房 3租房
			formList: [
				{
					lable: '房屋户型',
					type: 4
				},
				{
					lable: '房屋面积',
					type: 2,
					name: 'house_area',
					unit: '㎡'
				},
				{
					lable: '户型结构',
					type: 3,
					name: 'house_layout_structure',
					index: '',
					array: [{ val: '平层' }, { val: '复式' }, { val: '错层' }, { val: '跃层' }],
					unit: '㎡'
				},
				{
					lable: '房屋朝向',
					type: 3,
					name: 'orientation_of_house',
					index: '',
					array: [{ val: '朝南' }, { val: '朝东' }, { val: '朝西' }, { val: '朝北' }]
				},
				{
					lable: '参考价格',
					type: 2,
					name: 'house_price',
					unit: '万元/套'
				}		
			],
			layout: {
				room: '',
				liveRoom: '',
				toilet: ''				
			}
		};
	},
	methods: {
		bindPickerChange: function(e, box) {
			box.index = e.detail.value			
			this.house_layout[box.name] = e.detail.value + 1	
			this.resultObj[box.name] = box.array[e.detail.value].val
		},
		fnAdd() {
			// 请求后拿到这个户型的id，最后生成房源行数据以后对其进行更新			
			this.house_layout.house_layout =  this.layout.room + ';' + this.layout.liveRoom + ';' + this.layout.toilet					
			let _this = this
			uni.request({
			    url: store.url + '/house/add_house_layout',
				method: 'POST',
			    data: JSON.stringify(_this.house_layout),
			    header: {
					"content-type": "application/json;charset=utf-8"						
			    },
			    success: (res) => {						
					console.log(res)
					if(res.data.status == 'success'){												
						_this.house.house_layout_id.push(res.data.message)
						// 添加一个模板
						let newObj = {}
						newObj.title = '户型' + ++_this.resultId
						newObj.house_price = _this.house_layout.house_price
						newObj.house_area = _this.house_layout.house_area
						newObj.room = _this.layout.room
						newObj.liveRoom = _this.layout.liveRoom
						newObj.toilet = _this.layout.toilet
						newObj.house_price = _this.house_layout.house_price		
						newObj.house_layout_structure = _this.resultObj.house_layout_structure		
						newObj.orientation_of_house = _this.resultObj.orientation_of_house						
						_this.resultList.push(newObj)		
						_this.isAdded = true
						
						_this.layout.room = ''
						_this.layout.liveRoom = ''
						_this.layout.toilet = ''
						
						_this.house_layout[_this.formList[1].name] = ''
						
						_this.formList[2].index = ''
						_this.formList[3].index = ''
						
						_this.house_layout[_this.formList[4].name] = ''
					}else{
						uni.showModal({
						    title: '提示',
						    content: '提交失败: ' + res.data.message
						});									
					}										        
			    },
				fail: (res)=>{
					uni.showModal({
					    title: '提示',
					    content: '访问服务器失败: ' + res.data.message
					});						
				}
			});	
		},
		fnSubmit() {
			// pageType 1二手房 2新房 3租房
			if(this.isAdded === false){				
				uni.showModal({				   
					content: '请至少添加一个户型'
				});	
				return				
			}			
			uni.navigateTo({
				url: '/pages/house/publishImg?param=' + encodeURIComponent(JSON.stringify(this.house))
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.page-box {
	padding-bottom: 88rpx;
	box-sizing: border-box;

	/deep/ .uni-section {
		margin-top: 0;
		background: #fff;
	}

	/deep/ .line {
		background-color: #f13b32;
	}
}

.form-box {
	margin-bottom: 20rpx;
	padding-left: 40rpx;
	box-sizing: border-box;
	background: #fff;

	> view {
		display: flex;
		border-bottom: 1px solid #e5e5e5;
		box-sizing: border-box;
		align-items: center;
		font-size: 24rpx;

		&:last-of-type {
			border-bottom: none;
		}

		> view {
			width: 140rpx;
			line-height: 80rpx;
			font-size: 24rpx;

			&.more-input,&.img-box {
				display: flex;
				flex: 1;
				align-items: center;

				input {
					flex: 1;
					padding: 0;
					height: 40rpx;
					border-bottom: 1px solid;
					text-align: center;
				}
			}
		}

		input,
		.uni-input {
			padding: 20rpx 40rpx 20rpx 0;
			box-sizing: border-box;
			flex: 1;
			height: 80rpx;
			line-height: 40rpx;
		}

		text,
		uni-icons {
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		picker {
			flex: 1;
			
			view {
				font-size: 24rpx;
			}
		}
	}
}

.uni-uploader__input-box {
	margin: 20rpx 20rpx 20rpx 0;
}

.two-btn {
	display: flex;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	color: #fff;
	background: #f13b32;
	
	.btn-box {
		position: relative;
		flex: 1;
		line-height: 88rpx;
		
		&::after {
			position: absolute;
			content: '';
			width: 1px;
			top: 25%;
			right: 0;
			height: 50%;
			background: #FFF;
		}
		
		&:last-of-type::after {
			width: 0;
		}
	}
}
</style>
